<template>
    <section style="padding-bottom: 90px;">
        <DetailsHeader title="消息详情" class="mb-24" />

        <div class="page-card">
            <div v-html="form.content"> </div>
        </div>
    </section>
</template>

<script setup>
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getMessageDetailApi, messageReadApi } from 'api/modules/api.messages'
import emitter from '@/utils/Bus.js'

const route = useRoute();
const id = route.query.id
const form = ref({
    content: ''
})

// 获取详情
const getMessageDetail = () => {
    getMessageDetailApi({ id }).then(res => {
        if (res.code == 0) {
            const params = JSON.parse(res?.data?.detail?.params) || {}
            let str = res?.data?.detail?.content

            for (var i in params) {
                str = str.replace('${' + i + '}', params[i]);

            }

            form.value.content = str
        }
    })
}

id && getMessageDetail()

// 标记已读
const handleRead = () => {
    const params = {
        id: [id]
    }

    messageReadApi(params).then(res => {
        if (res.code == 0) {
            emitter.emit('getMsgList');
        }
    })
}

id && handleRead()

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .detail-content {
        .order-title {
            color: #223354;
            font-family: PingFang SC;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-bottom: 8px;
        }

        .order-desc {
            color: #646F87;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-bottom: 16px;
        }

        .order-content {
            display: flex;

            .img-list {
                margin-right: 8px;
                margin-bottom: 8px;
                width: 104px;
                height: 104px;
                flex-shrink: 0;
                border-radius: 4px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                background: #FFF;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 88px;
                    height: 88px;
                }
            }
        }
    }

    .head-sculpture {
        margin-right: 16px;

        img {
            width: 36px;
            height: 36px;

        }
    }

    .order-date {
        color: #8A93A7;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

}

.page-bottom {
    position: fixed;
    bottom: 0;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 10px 0px rgba(155, 174, 201, 0.40);
    width: calc(100% - 220px);
    min-height: 90px;
    padding: 24px;
    display: flex;
    justify-content: end;
    align-items: center;

    .tips {
        color: #FAAD14;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 16px;
    }
}

.avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>
